import { ColumnProps } from 'antd/lib/table';

import { Tag, Row, Spin, Table, Button } from 'antd';

import React from 'react';
import { BrandTableContext } from '../index';
import { ProductAttribute } from '../../../../../models/productAttribute';
import { Link } from 'umi';

const columns: ColumnProps<ProductAttribute>[] = [
  {
    title: '编号',
    dataIndex: 'id',
    align: 'center',
  },
  {
    title: '属性名称',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '属性是否可选',
    dataIndex: 'selectType',
    align: 'center',
    render: text => {
      switch (text) {
        case 0:
          return '唯一';
        case 1:
          return '单选';
        case 2:
          return '多选';
        default:
          return '';
      }
    },
  },
  {
    title: '属性值的录入方式',
    dataIndex: 'inputType',
    align: 'center',
    render: text => (text === 0 ? '手工录入' : '从列表中选取'),
  },
  {
    title: '可选值列表',
    dataIndex: 'inputList',
    align: 'center',
  },
  {
    title: '操作',
    key: 'actions',
    width: '170px',
    align: 'center',
    render: (_text, record) => (
      <BrandTableContext.Consumer>
        {table => (
          <div className="horizon-button-group">
            <Link to={`/product/attribute/add?id=${record.id}`}>
              <Button>编辑</Button>
            </Link>
            <Button type="danger" onClick={() => table.onRowDelete(record.id!)}>
              删除
            </Button>
          </div>
        )}
      </BrandTableContext.Consumer>
    ),
  },
];

export interface BrandTableProps {
  attributes: ProductAttribute[];
  currentCategoryId?: number;
  attrType?: number;
  loading?: boolean;
}

export default (props => (
  <Row>
    <Spin spinning={props.loading}>
      <Table<ProductAttribute>
        dataSource={props.attributes}
        columns={columns}
        rowKey="id"
        bordered
      />
    </Spin>
  </Row>
)) as React.FC<BrandTableProps>;
